import React from "react";
import { useNavigate } from "zmp-ui";
import { useRecoilValue } from "recoil";
import { userState } from "../state";
import { useI18n } from "../i18n";
import { useUserCenter } from "../hooks/useUserCenter";
import { version } from "../utils/baseUrl";
import ic_order from "../assets/img/home/nav_ic_order.png";
import ic_faq from "../assets/img/home/nav_ic_faq.png";
import ic_setting from "../assets/img/home/nav_ic_setting.png";

interface SidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

const Sidebar: React.FunctionComponent<SidebarProps> = ({ isOpen, onClose }) => {
  const user = useRecoilValue(userState);
  const { userCenterData } = useUserCenter();
  const { t } = useI18n();
  const navigate = useNavigate();

  const menuItems = [
    {
      key: "orderHistory",
      label: t("sidebar.orderHistory"),
      icon: ic_order,
      path: "/orders"
    },
    // {
    //   key: "wallet",
    //   label: t("sidebar.wallet"),
    //   icon: "💳",
    //   path: "/wallet"
    // },
    // {
    //   key: "coupons",
    //   label: t("sidebar.coupons"),
    //   icon: "🎫",
    //   path: "/coupons"
    // },
    // {
    //   key: "rewards",
    //   label: t("sidebar.rewards"),
    //   icon: "🏆",
    //   path: "/rewards"
    // },
    // {
    //   key: "inviteFriends",
    //   label: t("sidebar.inviteFriends"),
    //   icon: "🎁",
    //   path: "/invite"
    // },
    {
      key: "help",
      label: t("sidebar.help"),
      icon: ic_faq,
      path: "/help"
    },
    {
      key: "settings",
      label: t("sidebar.settings"),
      icon: ic_setting,
      path: "/settings"
    },
    {
      key: "zaloSdkTest",
      label: "Zalo SDK测试",
      icon: ic_setting,
      path: "/zalo-sdk-test"
    }
  ];

  const handleMenuClick = (path: string) => {
    navigate(path);
    onClose();
  };

  return (
    <>
      {/* 遮罩层 */}
      <div
        onClick={onClose}
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: 'rgba(0,0,0,0.3)',
          zIndex: 1500,
          opacity: isOpen ? 1 : 0,
          visibility: isOpen ? 'visible' : 'hidden',
          transition: 'opacity 0.3s ease, visibility 0.3s ease'
        }}
      />
      
      {/* 侧边栏内容 */}
      <div style={{
        position: 'fixed',
        top: 0,
        left: isOpen ? 0 : '-100%',
        width: '80%',
        maxWidth: 300,
        height: '100%',
        background: '#fff',
        boxShadow: '2px 0 8px rgba(0,0,0,0.1)',
        zIndex: 2000,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
        transition: 'left 0.3s ease'
      }}>
        {/* 用户信息区域 */}
        <div style={{
          padding: '30px 20px 15px 20px',
          background: '#fff'
        }}>
          <div 
            onClick={() => {
              navigate('/profile');
              onClose();
            }}
            style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: 10,
              cursor: 'pointer',
              transition: 'background-color 0.2s',
              borderRadius: 8,
              padding: 8,
              margin: '-8px -8px 10px -8px'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = '#f5f5f5';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = 'transparent';
            }}
          >
            {/* 用户头像 */}
            <div style={{
              width: 60,
              height: 60,
              borderRadius: 8,
              background: userCenterData?.user?.avatar 
                ? `url(${userCenterData.user.avatar}) center/cover`
                : 'linear-gradient(135deg, #ff6b6b, #ffa500)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginRight: 12,
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              flexShrink: 0
            }}>
              {!userCenterData?.user?.avatar && (
                <span style={{
                  fontSize: 28,
                  color: '#fff'
                }}>🔋</span>
              )}
            </div>
            
            {/* 用户信息 */}
            <div>
              <div style={{
                fontSize: 16,
                fontWeight: 'bold',
                color: '#333',
                maxWidth: 180,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                marginBottom: 2
              }}>
                {userCenterData?.user?.nickName || 
                 userCenterData?.user?.realName || ''}
              </div>
              <div style={{
                fontSize: 14,
                color: '#666'
              }}>
                {userCenterData?.user?.id ? `U${userCenterData.user.id.toString().padStart(8, '0')}` : 'U00000001'}
              </div>
            </div>
          </div>
        </div>

        {/* 菜单列表 */}
        <div style={{
          flex: 1,
          padding: '10px 0',
          overflow: 'auto',
          background: '#fff'
        }}>
          {menuItems.map((item, index) => (
            <div
              key={item.key}
              onClick={() => handleMenuClick(item.path)}
              style={{
                display: 'flex',
                alignItems: 'center',
                padding: '12px 20px',
                cursor: 'pointer',
                transition: 'background-color 0.2s',
                borderBottom: 'none'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.backgroundColor = '#f5f5f5';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = 'transparent';
              }}
            >
              {/* 菜单图标 */}
              <div style={{
                width: 40,
                height: 40,
                borderRadius: 6,
                background: '#f8f9fa',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginRight: 10,
                fontSize: 18
              }}>
                <img src={item.icon} alt={item.label} style={{ width: 20, height: 20 }} />
              </div>
              
              {/* 菜单文字 */}
              <div style={{
                flex: 1,
                fontSize: 14,
                fontWeight: 'bold',
                color: '#333'
              }}>
                {item.label}
              </div>
              
              {/* 右箭头 */}
              <div style={{
                width: 16,
                height: 16,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#999',
                fontSize: 16
              }}>
                ›
              </div>
            </div>
          ))}
        </div>

        {/* 版本信息 */}
        <div style={{
          padding: '15px 20px',
          textAlign: 'center',
          background: '#fff'
        }}>
          <div style={{
            fontSize: 12,
            color: '#999',
            opacity: 0.6
          }}>
            v {version}
          </div>
        </div>
      </div>
    </>
  );
};

export default Sidebar;
